<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="body">
            <Select :types="types" @getData="changeType"></Select>
            <div class="imgs">
                <ImgList :imgList="imgList" @viewPicture="viewPicture" :loading="loading"></ImgList>
            </div>
            <el-pagination size="small" background layout="prev, pager, next" :page-size="size" :total="total"
                v-model:current-page="page" class="pagination" @change="changePage" />
        </div>
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { get360ImgClassify, get360ImgClassifyImgs } from '@renderer/api/mohu'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import Select from '@renderer/components/select.vue'
const loading = ref(false)
const types: any = ref([])

const page = ref(1)
const size = ref(20)
const type = ref('')
const imgList: any = ref([])
const index = ref(0)
const showDetail = ref(false)
const total = ref(0)

const changeType = (newType: string) => {
    if (type.value == newType) return
    type.value = newType
    page.value = 1
    imgList.value = []
    getNetImgList()
}

const getNetImgList = async () => {
    imgList.value = []
    loading.value = true
    const obj = {
        cid: type.value,
        start: (page.value - 1) * size.value,
        count: size.value
    }
    const res = await get360ImgClassifyImgs(obj)
    imgList.value = []
    total.value = res.total * 1 > 1000 ? 1000 : res.total
    res.data.forEach((item: any) => {
        const obj1 = {
            src: item.img_1366_768,
            source: item.url,
            title: item.utag
        }

        imgList.value.push(obj1)
    })
    loading.value = false
}
const getTypes = async () => {
    const res = await get360ImgClassify()
    res.data.forEach((item: any) => {
        const obj = {
            label: item.name,
            value: item.id
        }
        types.value.push(obj)
    })
    type.value = types.value[0].value
    getNetImgList()
}

const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const changePage = (num: number) => {
    page.value = num
    getNetImgList()
}
onMounted(() => {
    getTypes()
})
onBeforeUnmount(() => { })
</script>

<style scoped lang="scss">
.bigBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .body {
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 5px;
        position: relative;

        .types {
            overflow-y: auto;

            .type {
                text-align: center;
                cursor: pointer;
                margin-top: 5px;
                transition: all 0.3s;
                user-select: none;

                &:hover {
                    background-color: #29f;
                    color: white;
                }
            }

            .active {
                background-color: #29f;
                color: white;
            }
        }

        .imgs {
            overflow-y: auto;
            @include mixin.scroll_bar();
        }

        .pagination {
            position: absolute;
            bottom: 10px;
            right: 20px;
            z-index: 1000;
        }
    }
}
</style>